<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #ffffff;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .login-container {
            background-color: #ffffff;
            border-radius: 12px;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
            width: 100%;
            max-width: 420px;
            padding: 40px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid #f0f0f0;
        }

        .login-container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
        }

        .login-header {
            text-align: center;
            margin-bottom: 35px;
        }

        .login-header h1 {
            color: #333;
            font-size: 28px;
            margin-bottom: 10px;
            font-weight: 600;
        }

        .login-header p {
            color: #666;
            font-size: 16px;
            line-height: 1.5;
        }

        .input-group {
            position: relative;
            margin-bottom: 25px;
        }

        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            transition: color 0.3s ease;
        }

        .input-group input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            border: 1px solid #e1e1e1;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s ease;
            background-color: #f9f9f9;
        }

        .input-group input:focus {
            border-color: #4a6cf7;
            box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15);
            outline: none;
            background-color: #ffffff;
        }

        .input-group input:focus + i {
            color: #4a6cf7;
        }

        .options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            font-size: 14px;
        }

        .remember {
            display: flex;
            align-items: center;
        }

        .remember input {
            margin-right: 8px;
            accent-color: #4a6cf7;
            cursor: pointer;
        }

        .remember label {
            cursor: pointer;
            color: #555;
        }

        .forgot-password {
            color: #4a6cf7;
            text-decoration: none;
            transition: color 0.3s ease;
            font-weight: 500;
        }

        .forgot-password:hover {
            color: #2a4bcc;
            text-decoration: underline;
        }

        .btn {
            width: 100%;
            padding: 15px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-btn {
            background-color: #4a6cf7;
            color: white;
            margin-bottom: 25px;
            box-shadow: 0 4px 12px rgba(74, 108, 247, 0.25);
        }

        .login-btn:hover {
            background-color: #3a5be0;
            box-shadow: 0 6px 15px rgba(74, 108, 247, 0.35);
        }

        .signup-link {
            text-align: center;
            font-size: 15px;
            color: #666;
            margin-top: 15px;
        }

        .signup-link a {
            color: #4a6cf7;
            text-decoration: none;
            font-weight: 600;
            margin-left: 5px;
            transition: color 0.3s ease;
        }

        .signup-link a:hover {
            color: #2a4bcc;
            text-decoration: underline;
        }

        .error-message {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .input-group.error input {
            border-color: #e74c3c;
            background-color: #fff6f6;
        }

        .input-group.error i {
            color: #e74c3c;
        }

        .input-group.error .error-message {
            display: block;
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #777;
        }

        .password-toggle:hover {
            color: #4a6cf7;
        }

        @media (max-width: 480px) {
            .login-container {
                padding: 30px 20px;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            }

            .options {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .login-header h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
<div class="login-container">
    <div class="login-header">
        <h1>欢迎登录</h1>
        <p>请输入您的账号信息以继续访问</p>
    </div>

    <form id="loginForm">
        <div class="input-group">
            <i class="fas fa-user"></i>
            <input type="text" id="username" placeholder="用户名或邮箱" required>
            <div class="error-message">请输入有效的用户名或邮箱</div>
        </div>

        <div class="input-group">
            <i class="fas fa-lock"></i>
            <input type="password" id="password" placeholder="密码" required>
            <span class="password-toggle" id="togglePassword">
                    <i class="fas fa-eye"></i>
                </span>
            <div class="error-message">密码长度至少为6个字符</div>
        </div>

        <div class="options">
            <div class="remember">
                <input type="checkbox" id="remember">
                <label for="remember">记住我</label>
            </div>
            <a href="#" class="forgot-password">忘记密码?</a>
        </div>

        <button type="submit" class="btn login-btn">登录</button>
    </form>

    <div class="signup-link">
        还没有账户? <a href="#">立即注册</a>
    </div>
</div>

<script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const username = document.getElementById('username').value.trim();
        const password = document.getElementById('password').value;
        const usernameGroup = document.querySelector('#username').closest('.input-group');
        const passwordGroup = document.querySelector('#password').closest('.input-group');

        // 重置错误状态
        usernameGroup.classList.remove('error');
        passwordGroup.classList.remove('error');

        let isValid = true;

        // 验证用户名
        if (username === '' || username.length < 3) {
            usernameGroup.classList.add('error');
            isValid = false;
        }

        // 验证密码
        if (password.length < 6) {
            passwordGroup.classList.add('error');
            isValid = false;
        }

        if (isValid) {
            // 模拟登录成功
            const loginBtn = document.querySelector('.login-btn');
            const originalText = loginBtn.innerHTML;
            loginBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 登录中...';
            loginBtn.disabled = true;

            setTimeout(() => {
                loginBtn.innerHTML = originalText;
                loginBtn.disabled = false;

                // 显示成功消息
                const successMsg = document.createElement('div');
                successMsg.innerHTML = '<i class="fas fa-check-circle"></i> 登录成功！正在跳转...';
                successMsg.style.cssText = `
                        position: fixed;
                        top: 20px;
                        left: 50%;
                        transform: translateX(-50%);
                        background-color: #4BB543;
                        color: white;
                        padding: 15px 25px;
                        border-radius: 8px;
                        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
                        z-index: 1000;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                        font-weight: 500;
                        animation: fadeInOut 3s forwards;
                    `;
                document.body.appendChild(successMsg);

                // 3秒后移除消息
                setTimeout(() => {
                    successMsg.remove();
                }, 3000);
            }, 1500);
        }
    });

    // 密码显示/隐藏功能
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('password');
    const eyeIcon = togglePassword.querySelector('i');

    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        eyeIcon.classList.toggle('fa-eye');
        eyeIcon.classList.toggle('fa-eye-slash');
    });

    // 添加动画关键帧
    const style = document.createElement('style');
    style.innerHTML = `
            @keyframes fadeInOut {
                0% { opacity: 0; top: 0; }
                10% { opacity: 1; top: 20px; }
                90% { opacity: 1; top: 20px; }
                100% { opacity: 0; top: 0; }
            }
        `;
    document.head.appendChild(style);
</script>
</body>
</html>